<template>
  <div class="home">
    <div>
      <router-view></router-view>
    </div>
    <van-tabbar v-model="activeIndex" active-color="#fbb705" inactive-color="#8a8a8a" route>
      <van-tabbar-item v-for="(item,index) in tabbarData" :key="index" :to="{name:item.routerName}">
        <span>{{item.title}}</span>
        <template #icon="props">
          <img :src="props.active ? item.activeIcon : item.icon" />
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  name: "Main",
  data() {
    return {
      activeIndex: 0,
      tabbarData:[
        {
          title:'首页',
          routerName:'Home',
          icon:require('../assets/home.png'),
          activeIcon:require('../assets/home-active.png')
        },
        {
          title:'菜谱',
          routerName:'Recipe',
          icon:require('../assets/recipe.png'),
          activeIcon:require('../assets/recipe-active.png')
        },
        {
          title:'笔记',
          routerName:'Notes',
          icon:require('../assets/notes.png'),
          activeIcon:require('../assets/notes-active.png')
        },
        {
          title:'我的',
          routerName:'My',
          icon:require('../assets/my.png'),
          activeIcon:require('../assets/my-active.png')
        }
      ]
    };
  },
};
</script>
